<template>
  <a-card :bordered="false" :style="{ minHeight: `${layoutContentHeight - pageHeaderHeight}px` }">
    <div class="table-page-search-wrapper">
      <a-form
        layout="inline"
        :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
      >
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item :label="$t('messageCenter.app.app')">
              <a-select v-model="queryParams.appId" allowClear>
                <a-select-option v-for="a in appList" :key="a.id" :value="a.appId">{{ a.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item :label="$t('messageCenter.app.tempCode')">
              <a-input v-model="queryParams.code" allowClear />
            </a-form-item>
          </a-col>
          <span class="table-page-search-submitButtons">
            <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">{{
              $t('common.query')
            }}</a-button>
            <a-button style="margin-left: 8px" icon="reload" @click="onReset">{{ $t('common.reset') }}</a-button>
          </span>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      :alert="false"
      rowKey="id"
      pageURI
      :scroll="{ x: 1200 }"
      :showPagination="true"
    >
      <span slot="status" slot-scope="text, record">
        <a-popconfirm
          v-if="record.status === 0"
          placement="topRight"
          :okText="$t('common.ok')"
          :cancelText="$t('common.cancel')"
          @confirm="onClose(record)"
        >
          <template slot="title">
            <p>确定要关闭该升级通知吗？</p>
          </template>
          <a href="javascript:;" @click="onClose(record)">{{ $t('common.close') }}</a>
        </a-popconfirm>
        <span v-else>已执行</span>
      </span>
      <template slot="action" slot-scope="text, record">
        <a href="javascript:;" @click="$refs.noticeDetailModal.show(record)">{{ $t('common.detail') }}</a>
      </template>
    </s-table>
    <notice-detail-modal ref="noticeDetailModal" />
  </a-card>
</template>

<script>
import { layoutMixin } from '@/utils/mixin';
import { getNoticeList, closeNotice } from '@/api/messageCenter/notice';
import { getAppList } from '@/api/messageCenter/mos';
import { STable } from '@/components';
import NoticeDetailModal from './DetailModal';
export default {
  name: 'Notice',
  mixins: [layoutMixin],
  components: {
    STable,
    NoticeDetailModal
  },
  data() {
    return {
      appList: [],
      queryParams: {},
      loadData: params => {
        return getNoticeList({ ...params, ...this.trimedQueryParams }).then(res => {
          return res.data;
        });
      }
    };
  },
  computed: {
    columns() {
      return [
        {
          title: this.$t('messageCenter.app.app'),
          dataIndex: 'appName'
        },
        {
          title: this.$t('messageCenter.app.upTempCode'),
          dataIndex: 'code'
        },
        {
          title: this.$t('messageCenter.app.msgTempCode'),
          dataIndex: 'templateCode',
          width: 200
        },
        {
          title: this.$t('common.createTime'),
          dataIndex: 'notificationTime',
          scopedSlots: { customRender: 'fileSize' }
        },
        {
          title: this.$t('messageCenter.app.exeCycle'),
          dataIndex: 'cycle'
        },
        {
          title: this.$t('messageCenter.app.upLevel'),
          dataIndex: 'level'
        },
        {
          title: this.$t('common.status'),
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('common.action'),
          dataIndex: 'action',
          width: 180,
          align: 'center',
          scopedSlots: { customRender: 'action' },
          fixed: 'right'
        }
      ];
    },

    trimedQueryParams() {
      let params = Object.assign({}, this.queryParams);
      for (let prop in params) {
        if (params.hasOwnProperty(prop) && typeof params[prop] === 'string') {
          params[prop] = params[prop].trim();
        }
      }
      return params;
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getAppList();
    },

    getAppList() {
      getAppList({ pageNo: 1, pageSize: 9999 }).then(res => {
        const data = res.data;
        if (!!data) {
          this.appList = data.data.map(ele => ({
            id: ele.id,
            appId: ele.appId,
            name: ele.name
          }));
        }
      });
    },

    onClose(record) {
      closeNotice({ id: record.id, type: 1 }).then(res => {
        this.$refs.table.refresh(true);
      });
    },

    onReset() {
      this.queryParams = {};
      this.$refs.table.refresh(true);
    }
  }
};
</script>

<style></style>
